import React, { useState } from 'react'
import Header from '../../../components/Header'
import './index.css'
import sp3 from '../../../assets/image/商品3.png'
import { EnvironmentOutline, ClockCircleOutline, HandPayCircleOutline } from 'antd-mobile-icons'
import { Button, SideBar, Stepper } from 'antd-mobile'
import sp2 from '../../../assets/image/奶4.png'


export default function DoorOrder() {
    const [activeKey, setActiveKey] = useState('key1')
    const [list, setList] = useState([1, 2, 3, 4])

    const renderHang = () => {
        return (
            <div>
                {
                    list.map(() => {
                        return (
                            <div className='doorOrder_hang'>
                                <div className='doorOrder_hang_left'>
                                    <div>
                                        <img src={sp2} alt="" className='doorOrder_hang_img' />
                                    </div>
                                    <div className='doorOrder_hang_tittle'>
                                        牛肉面
                                    </div>
                                </div>
                                <div className='doorOrder_hang_right'>
                                    <Stepper
                                        defaultValue={1}
                                        onChange={value => {
                                            console.log(value)
                                        }}
                                        min={0}
                                        style={{
                                            '--height': '10px',
                                        }}
                                    />
                                </div>
                            </div>
                        )
                    })
                }
            </div>


        )
    }

    const tabs = [
        {
            key: 'key1',
            title: '选项一',
            badge: '2',
            text: renderHang()
        },
        {
            key: 'key2',
            title: '选项二',
            badge: '5',
            text: 'wwwww'
        },
        {
            key: 'key3',
            title: '选项三',
            badge: '99+',
            disabled: true,
            text: 'qqqq'
        },
    ]



    return (
        <div>
            <Header />
            <div className='doorOrderMain'>
                <div className='doorOrder_bg'>
                    <div className='doorOrder_card'>
                        <img className='doorOrder_img' src={sp3} alt="" />
                        <h2>王喜凤麻辣烫</h2>
                        <div className='doorOrder_position'>
                            <EnvironmentOutline /> 位于成都东软学院新食堂意大利
                        </div>
                    </div>
                </div>
                <div className='doorOrder_do'>
                    <div className='doorOrder_time'>
                        <ClockCircleOutline />营业时间 12:00-19:00
                    </div>
                    <div className='doorOrder_money'>
                        <HandPayCircleOutline />最低花费 10.00元
                    </div>
                </div>
                <div className={'container'}>
                    <div className={'side'}>
                        <SideBar activeKey={activeKey} onChange={setActiveKey}>
                            {tabs.map(item => (
                                <SideBar.Item
                                    key={item.key}
                                    title={item.title}

                                />
                            ))}
                        </SideBar>
                    </div>
                    <div className={'main'}>
                        {tabs.map(item => (
                            <div key={item.key}>
                                <h2 id={`anchor-${item.key}`}>{item.title}</h2>
                                {item.text}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
            <div className='doorOrderMain_order'>
                <Button block color='primary' size='large'>
                    点击购买
                </Button>
            </div>
        </div>
    )
}
